<template>
  <div class="app-container">
    <!--表单-->
    <!-- <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.country" placeholder="国家名"/>
      </el-form-item>


      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="queryByCountry()">按国家查询
      </el-button>

    </el-form>

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.state" placeholder="州名"/>
      </el-form-item>


      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="queryByState()">按州查询
      </el-button>

    </el-form> -->

    <div class="chart-container">
      <div id="chart" class="chart" style="height:500px;width:100%"/>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import sta from '@/api/sta'

  export default {
    data() {
      return {
        searchObj: {
          country: '',
          state: ''
        },
        btnDisabled: false,
        chart: null,
        title: '',
        xData: [],
        y1Data: [],
        y2Data: []
      }
    },
    created() {
      this.showChart()
    },
    methods: {
      showChart() {
        this.initChartData()
        this.setChart()
      },
      // 准备图表数据
      initChartData() {
        sta.getData(this.searchObj).then(response => {
          // 数据
          this.y1Data = response.data.sum

          this.y2Data = response.data.price

          // 横轴时间
          this.xData = response.data.day
          this.setChart()
        })
      },

      // 设置图标参数
      setChart() {
        // 基于准备好的dom，初始化echarts实例
        this.chart = echarts.init(document.getElementById('chart'))
        // console.log(this.chart)

        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '销售情况',
            //subtext: '实时数据'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['订单数', '销售总额']
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: this.xData
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '订单数',
              type: 'bar',
              data: this.y1Data

            },
            {
              name: '销售总额',
              type: 'bar',
              data: this.y2Data

            }
          ]

        } //标记

        this.chart.setOption(option)
      }
    }
  }
</script>
